<template>
  <!-- 采购订单明细 -->
  <div class="table-w">
    <a-table size="mini" class="table-normal-line show-border-table" :loading="tableLoading" :summary="true" style="margin-top: 10px" :pagination="false" :scroll="{ y: 'calc(84vh - 260px)' }" :data="tableInfo.billItems">
      <template #columns>
        <a-table-column title="交货单号" :width="80">
          <template #cell="{ record }">
            <span class="highlight">{{ record.deliveryNo }}</span>
          </template>
        </a-table-column>
        <a-table-column title="入库单号" :width="80">
          <template #cell="{ record }">
            <span class="highlight">{{ record.receiptNo }}</span>
          </template>
        </a-table-column>
        <a-table-column title="目的仓" :width="100">
          <template #cell="{ record }">
            <TextLimit :val="`${record.warehouseName}(${record.warehouseCode})`" />
          </template>
        </a-table-column>
        <a-table-column title="店铺" :width="120">
          <template #cell="{ record }">
            <TextLimit :val="record.shopName" />
          </template>
        </a-table-column>
        <a-table-column title="图片" :width="60">
          <template #cell="{ record }">
            <ImgPopover :src="record.productImg">
              <template #con>
                <a-image width="40" height="40" fit="contain" :src="record.productImg" />
              </template>
            </ImgPopover>
          </template>
        </a-table-column>
        <a-table-column title="产品名称" :width="140">
          <template #cell="{ record }">
            <TextLimit :val="record.productName" :rows="1" />
          </template>
        </a-table-column>
        <a-table-column title="SKU/类目" :width="140">
          <template #cell="{ record }">
            <ShowSpuDetailBySku :val="record.sku" :showLimit="true" :rows="1" />
            <p>{{ record.cateName || '--' }}</p>
          </template>
        </a-table-column>
        <a-table-column data-index="productSpecs" title="规格名" :width="100">
          <template #cell="{ record }">
            <TextLimit :val="getProductSpecs(record)" />
          </template>
        </a-table-column>
        <a-table-column data-index="msku" title="MSKU/ASIN" :width="140">
          <template #cell="{ record }">
            <TextLimit :val="record.msku || '--'" :rows="1" />
            <TextLimit :val="record.asin || '--'" :rows="1" />
          </template>
        </a-table-column>
        <a-table-column data-index="warehouseStayAmt" title="待入库数" :width="70" />
        <a-table-column data-index="warehouseRealAmt" title="已入库数" :width="70" />
        <a-table-column data-index="warehouseReturnAmt" title="退回数量" :width="70" />
        <a-table-column title="单件成本" :width="80">
          <template #cell="{ record }">
            <p>￥{{ record.unitCosts }}</p>
          </template>
        </a-table-column>
        <a-table-column data-index="inventoryValue" title="入库货值" :width="80">
          <template #cell="{ record }">
            <p>￥{{ record.inventoryValue }}</p>
          </template>
        </a-table-column>
        <a-table-column title="入库货位" :width="80">
          <template #cell="{ record }">
            <div>{{ record.locationCode }}</div>
          </template>
        </a-table-column>
        <a-table-column title="入库人" :width="70" data-index="signUname">
          <template #cell>
            {{ tableInfo.signUname }}
          </template>
        </a-table-column>
        <a-table-column title="入库时间" :width="140">
          <template #cell>
            {{ $setTime(tableInfo.gmtSign) }}
          </template>
        </a-table-column>
      </template>
      <template #summary-cell="{ column, record }">
        <p v-if="column.dataIndex == 'msku'">合计</p>
        <p v-else-if="['warehouseAmt', 'warehouseRealAmt', 'warehouseReturnAmt'].includes(column.dataIndex)">{{ record[column.dataIndex] }}</p>
        <p v-else-if="['inventoryValue'].includes(column.dataIndex)">￥{{ record[column.dataIndex] }}</p>
      </template>
    </a-table>
  </div>
</template>
<script lang="ts" setup>
  import { ref, onMounted } from 'vue'
  import { findReceiptByDelivery } from '@/api/purchase'
  import { parseJson } from '@/utils'
  onMounted(() => {
    getTableList()
  })
  const props = defineProps({
    currentData: {
      type: Object,
      default: () => {},
    },
  })
  const tableInfo = ref<any>({})
  const tableLoading = ref(false)
  // 获取入库单列表
  async function getTableList() {
    tableLoading.value = true
    const res: any = await findReceiptByDelivery({ id: props.currentData.id })
    tableLoading.value = false
    tableInfo.value = res?.data?.[0] || {}
  }
  // 显示sku规格
  function getProductSpecs(item: any) {
    let productSpecs = item.productSpecs ? parseJson(item.productSpecs, []) : []
    return productSpecs.map((el: any) => el.valueCn)?.join('*') || '--'
  }
</script>
<style lang="less" scoped>
  .product-list-w {
    flex: 1;
    background-color: #fff;
    display: flex;
    padding: 0 20px;
    flex-direction: column;
    overflow: hidden;
  }
  .header {
    font-weight: bold;
    margin-bottom: 10px;
  }
  .table-w {
    flex: 1;
    overflow: hidden;
  }
</style>
